<div class="middle">
  <div class="middle-header">
    <div class="container-fluid">
      <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
      <alerts alerts="alerts"></alerts>
      <div ng-if="!loaded">Loading...</div>
      <div ng-if="pvc">
        <h1 class="contains-actions">
          <div class="pull-right dropdown" ng-hide="!('persistentVolumeClaims' | canIDoAny)">
            <button type="button" class="dropdown-toggle btn btn-default actions-dropdown-btn hidden-xs" data-toggle="dropdown">
              Actions
              <span class="caret" aria-hidden="true"></span>
            </button>
            <a href=""
               class="dropdown-toggle actions-dropdown-kebab visible-xs-inline"
               data-toggle="dropdown"><i class="fa fa-ellipsis-v"></i><span class="sr-only">Actions</span></a>
            <ul class="dropdown-menu dropdown-menu-right actions action-button">
              <li ng-if="!pvc.spec.volumeName">
                <a ng-href="{{pvc | editYamlURL}}" role="button">Edit YAML</a>
              </li>
              <li>
                <edit-pvc
                  ng-if="isExpansionAllowed && (pvcVersion | canI : 'update')"
                  pvc="pvc">
                </edit-pvc>
              </li>
              <li>
                <delete-link
                  ng-if="pvcVersion | canI : 'delete'"
                  kind="PersistentVolumeClaim"
                  resource-name="{{pvc.metadata.name}}"
                  project-name="{{pvc.metadata.namespace}}"
                  alerts="alerts">
                </delete-link>
              </li>
            </ul>
          </div>
          {{pvc.metadata.name}}
          <small class="meta" ng-if="!pvc.spec.volumeName">
              <span ng-if="pvc.spec.resources.requests['storage']">
                waiting for {{pvc.spec.resources.requests['storage'] | usageWithUnits: 'storage'}} allocation,
              </span>
              <span ng-if="!pvc.spec.resources.requests['storage']">waiting for allocation,</span>
          </small>
          <small class="meta">created <span am-time-ago="pvc.metadata.creationTimestamp"></span></small>
        </h1>
        <labels labels="pvc.metadata.labels" clickable="true" kind="storage" project-name="{{pvc.metadata.namespace}}" limit="3"></labels>
      </div><!-- /deployment -->
    </div>
  </div><!-- /middle-header-->
  <div class="middle-content">
    <div class="container-fluid">
      <div class="row" ng-if="pvc" >
        <div class="col-md-12">
          <uib-tabset>
            <uib-tab heading="Details" active="selectedTab.details">
              <uib-tab-heading>Details</uib-tab-heading>
                <div class="resource-details">
                <dl class="dl-horizontal left">
                  <dt>Status:</dt>
                  <dd>
                    <status-icon status="pvc.status.phase" disable-animation></status-icon>
                    {{pvc.status.phase}}
                    <span ng-if="pvc.spec.volumeName">to volume <strong>{{pvc.spec.volumeName}}</strong></span>
                  </dd>
                  <dt ng-if="pvc.spec.volumeName">Capacity:</dt>
                  <dd ng-if="pvc.spec.volumeName">
                    <span ng-if="pvc.status.capacity['storage']">
                      allocated {{pvc.status.capacity['storage'] | usageWithUnits: 'storage'}}
                    </span>
                    <span ng-if="!pvc.status.capacity['storage']">allocated unknown size</span>
                  </dd>
                  <dt>Requested Capacity:</dt>
                  <dd>
                    <span ng-if="pvc.spec.resources.requests['storage']">
                      {{pvc.spec.resources.requests['storage'] | usageWithUnits: 'storage'}}
                    </span>
                    <span ng-if="!pvc.spec.resources.requests['storage']"><em>none</em></span>
                  </dd>
                  <dt>Access Modes:</dt>
                  <dd>{{pvc.spec.accessModes | accessModes:'long' | join}}</dd>
                </dl>
              </div>
            </uib-tab>
            <uib-tab active="selectedTab.events" ng-if="eventsVersion | canI : 'watch'">
              <uib-tab-heading>Events</uib-tab-heading>
              <events api-objects="[ pvc ] " project-context="projectContext" ng-if="selectedTab.events"></events>
            </uib-tab>
          </uib-tabset>
        </div><!-- /col-* -->
      </div>
    </div>
  </div><!-- /middle-content -->
</div>
